let audio_c = document.getElementById("audio_c");
let audio = document.getElementById("audio");
let banner_item = document.querySelectorAll('.banner_item')
let banner = document.querySelector('.banner')
let prev = document.querySelector('.prev')
let next = document.querySelector('.next')
let index = 0
let timer = null  // 定时器
let onOff = true
let lock = true

audio_c.onclick = function () {
    if (onOff) {
        audio_c.src = "images/audio-off.png";
        audio.pause();
        onOff = false;
    } else {
        audio_c.src = "images/audio-on.png";
        audio.play();
        onOff = true;
    }
}
banner_item_init = function () {
    banner_item[0].style.backgroundImage = 'url(images/liyue.jpg)'
    banner_item[1].style.backgroundImage = 'url(images/tiwate.png)'
    banner_item[2].style.backgroundImage = 'url(images/mengde.jpg)'
    banner_item[3].style.backgroundImage = 'url(images/liyue.jpg)'
    banner_item[4].style.backgroundImage = 'url(images/tiwate.png)'
    banner_item[5].style.backgroundImage = 'url(images/mengde.jpg)'
    banner_item[6].style.backgroundImage = 'url(images/liyue.jpg)'
    // swapFormat()
    // 添加定时器，调用函数
    timer = setInterval(swapFormat, 3000)
    // 点击左箭头
    prev.addEventListener('click', function () {
        //防止重复点击
        if (lock) {
            setTimeout(() => { lock = true }, 1000)
            lock = false
            index--;
            // 如果要切换到第3张
            if (index < 0) {
                index = -1
                banner.style.transition = 'all, linear, 1s';
                banner.style.left = -index * 1200 + 'px';
                // 迅速切换
                setTimeout(function () {
                    index = 2
                    banner.style.transition = '';
                    swapImg();
                }, 1000)
            } else {
                banner.style.transition = 'all, linear, 1s';
                swapImg();
            }
        }
    })
    // 点击右箭头，图片移动方式与自动播放一样
    next.addEventListener('click', function () {
        //防止重复点击
        if (lock) {
            setTimeout(() => { lock = true }, 1000)
            lock = false
            swapFormat()
        }
    })
    // 当鼠标在图片上、左箭头、右箭头时清除定时器，即图片不轮播
    banner.addEventListener('mouseover', function () {
        clearInterval(timer)
    })

    next.addEventListener('mouseover', function () {
        clearInterval(timer)
    })

    prev.addEventListener('mouseover', function () {
        clearInterval(timer)
    })

    // 当鼠标离开图片、左箭头、右箭头时开启定时器，即图片继续轮播
    banner.addEventListener('mouseout', function () {
        timer = setInterval(swapFormat, 3000)
    })

    next.addEventListener('mouseout', function () {
        timer = setInterval(swapFormat, 3000)
    })

    prev.addEventListener('mouseout', function () {
        timer = setInterval(swapFormat, 3000)
    })
}
function swapImg() {
    // 修改img_box的定位，往左偏移 index * imgContainerW
    banner.style.left = -index * 1200 + 'px';
}
function swapFormat() {
    index++
    // 如果是在最后一张图片
    if (index >= 3) {
        // 此处是为了防止频繁点击按钮，index++，导致index超过3，变成4、5、6...
        // 当index>=，我们强行让其等于4,类似防抖
        index = 3;
        banner.style.transition = 'all, linear, 1s';
        banner.style.left = -index * 1200 + 'px';
        // 此处就是我们为实现无缝轮播，做的手脚 
        // 通过延时定时器，当图片过渡完，立刻马上切换到第一张图片
        setTimeout(function () {
            index = 0;  // 第一张图片
            banner.style.transition = '';  // 无过度
            swapImg();
        }, 1000)
        // 如果是其它图片，正常过渡切换
    } else {
        banner.style.transition = 'all, linear, 1s';
        swapImg();
    }
}
banner_item_init()
